<template>
  <div class="supplier-log">
    <template v-if="logsNum">
      <log-time-line :logs="logList" :edit-api="handleEdit" @success="editLogCallback" />
      <div v-if="logsNum > 3" class="log-open-btn" @click="logOpen = !logOpen">
        {{ logOpen?'收起':'展开' }}全部记录<i :class="logOpen?'el-icon-arrow-up':'el-icon-arrow-down'"/>
      </div>
    </template>
    <div v-else class="empty-container">
      <img :src="emptyImg" alt="">
      <div class="empty-text">暂无操作日志</div>
    </div>
  </div>
</template>
<script>
import { clientLogRemarkEdit } from '@/api/customer';
import emptyIcon from '@/assets/home/emptyIcon.png';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import LogTimeLine from '@/components/Common/logTimeLine';
import emptyImg from '@/assets/empty-data-icon.png';

export default {
  components: { LogTimeLine },
  props: {
    id: {
      type: Number,
      default: null
    },
    logListData: {
      type: Array,
      default: () => []
    },
    logsNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      emptyIcon,
      emptyImg,
      logOpen: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    logList() {
      const logListClone = _.cloneDeep(this.logListData);
      if (this.logOpen || this.logsNum <= 3) {
        return this.handleData(logListClone);
      }
      return this.handleData(logListClone.slice(0, 3));
    }
  },
  methods: {
    hasRouteAuth,
    handleData(data) {
      const res = [];
      data.forEach(item => { // 转换key值
        item.opeatorUserId = Number(item.opeatorUserId);
        item.opeatorUser = '';
        item.operationTime = this.getStartTime(item.time);
        const resItem = res.find(i => {
          return i.operationTime === item.operationTime;
        });
        if (!resItem) {
          res.push({
            operationTime: item.operationTime,
            operations: [item]
          });
        } else {
          resItem.operations.push(item);
        }
      });
      return res;
    },
    handleEdit(data) {
      return new Promise((resolve, reject) => {
        if (data.remark !== '' && data.remark.length > 500) {
          this.$message({ type: 'warning', message: '请输入小于500个字的备注' });
          reject();
        } else {
          const params = Object.create(null);
          params.logId = data.id;
          params.remark = data.remark;
          params.id = this.id;
          clientLogRemarkEdit(params).then(res => {
            resolve(res);
          });
        }
      });
    },
    // 获取指定时间0点
    getStartTime(time) {
      const nowTimeDate = new Date(time);
      return nowTimeDate.setHours(0, 0, 0, 0);
    },
    editLogCallback() {
      this.$emit('editLogCallback');
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-log {
  margin-bottom: 50px;
  .log-open-btn {
    display:flex;
    justify-content:center;
    color: #333333;
    font-size:14px;
    cursor: pointer;
    align-items: center;
    margin-top: 10px;
    i {
      margin-left: 8px;
    }
  }
}
.empty-container {
  text-align: center;
  position: relative;
  margin-top: 20px;
  img {
    width: 90px;
  }
  .empty-text {
    color: #999;
    max-width: 300px;
    font-size: 14px;
    margin: 0 auto;
  }
}
</style>
